<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 入库记录
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-select v-model="queryInfo.s_wid" placeholder="仓库号" class="handle-select mr10">
                    <el-option key="1" label="仓库1" value="1"></el-option>
                    <el-option key="2" label="仓库2" value="2"></el-option>
                    <el-option key="3" label="仓库3" value="3"></el-option>
                    <el-option key="4" label="仓库4" value="4"></el-option>
                    <el-option key="5" label="仓库5" value="5"></el-option>
                </el-select>
                <el-input v-model="queryInfo.gmodel" placeholder="货品类别" class="handle-input mr10"></el-input>
                <el-input v-model="queryInfo.gname" placeholder="货品名" class="handle-input mr10"></el-input>




                <el-date-picker v-model="queryInfo.sdate1" type="date" placeholder="起始时间" :default-value="new Date()" />-
                <el-date-picker v-model="queryInfo.sdate2" type="date" placeholder="结束时间"
                    :default-value="new Date()" />&nbsp;


                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>

                <el-button type="primary" icon="el-icon-search" @click="flush">重置</el-button>
            </div>


            <el-table :data="pb.list" border class="table" ref="multipleTable" header-cell-class-name="table-header"
                @row-click="find">
                <el-table-column fixed prop="xuhao" label="序号" width="100" align="center"></el-table-column>
                <el-table-column fixed prop="s_type" label="单据类型" width="100" align="center"></el-table-column>
                <el-table-column fixed prop="s_vendor" label="供应商" width="100" align="center"></el-table-column>
                <el-table-column prop="sdate" label="日期" width="100" align="center"></el-table-column>
                <el-table-column prop="head" label="负责人" width="100" align="center"></el-table-column>
                <el-table-column prop="gcategory" label="货品类别" width="100" align="center"></el-table-column>
                <el-table-column prop="s_gid" label="货品编号"></el-table-column>
                <el-table-column prop="s_wid" label="入库仓库"></el-table-column>
                <el-table-column prop="gname" label="货品名字"></el-table-column>
                <el-table-column prop="gmodel" label="货品规格"></el-table-column>
                <el-table-column label="货品图片" align="center">
                    <template #default="scope">
                        <el-image class="table-td-thumb" :src="scope.row.gthumb" :preview-src-list="[scope.row.gthumb]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="单价">
                    <template #default="scope">￥{{ scope.row.gprice }}</template>
                </el-table-column>
                <el-table-column prop="dnumber" label="库存数量"></el-table-column>

                <el-table-column prop="sinbound" label="入库数量"></el-table-column>
                <el-table-column prop="sinmoney" label="入库金额"></el-table-column>
                <el-table-column prop="dlower" label="最低库存"></el-table-column>
                <el-table-column prop="dupper" label="最高库存"></el-table-column>
                <el-table-column prop="approver" label="审核人"></el-table-column>


                <KeepAlive>
                <el-table-column label="是否入库" align="center" width="120">
                    <!-- <template #default="scope">
                      <el-tag :type="scope.row.state === '成功'
                          ? 'success'
                          : scope.row.state === '失败'
                              ? 'danger'
                              : ''
                          ">{{ scope.row.state }}</el-tag>
                  </template> -->
                  <el-button type="success" round size="small" >已入库</el-button>
                    <!-- <template #default="scope">
                        <el-switch v-model="scope.row.changer" :before-change="beforeChange" />
                    </template> -->
                </el-table-column>
            </KeepAlive>
                <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                        <el-form-item>
                            <el-button type="primary" @click="details(scope.row)">详情</el-button>
                            <el-button type="text" icon="el-icon-delete" class="red"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </el-form-item>

                        
                    </template>
                </el-table-column>
            </el-table>
           
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="pb.currentPage"
                    :page-size="pb.pageSize" :total="pb.totalCount" @current-change="handlePageChange"></el-pagination>
            </div>

        </div>

    </div>
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">


    <el-form :model="form" label-width="100px">




    <el-form-item label="单据类型" class="ac">
        <el-input v-model="form.s_type" placeholder="请输入" disabled="true" />

    </el-form-item>
    <el-form-item label="供应商" class="ac">
        <el-input v-model="form.s_vendor" placeholder="请输入" disabled="true" />
    </el-form-item>
    <el-form-item label="日期" class="ac">
        <el-input v-model="form.sdate" placeholder="请输入" disabled="true" />
    </el-form-item>
    <el-form-item label="负责人" class="ac">
        <el-input v-model="form.head" placeholder="请输入" disabled="true" />
    </el-form-item>
    <el-form-item label="货品类别" class="ac">
        <el-input v-model="form.gcategory" placeholder="请输入" disabled="true" />
    </el-form-item>
    <el-form-item label="货品编号" class="ac">
        <el-input v-model="form.s_gid" placeholder="请输入" disabled="true" />
    </el-form-item>
    <el-form-item label="入库仓库" class="ac">
        <el-input v-model="form.s_wid" placeholder="请输入" disabled="true" />
    </el-form-item>
    <el-form-item label="货品名字" class="ac">
        <el-input v-model="form.gname" placeholder="请输入" disabled="true" />
    </el-form-item>
    <el-form-item label="货品规格" class="ac">
        <el-input v-model="form.gmodel" placeholder="请输入" disabled="true" />
    </el-form-item>
    <!-- <el-form-item label="货品图片" class="ac">
                          <el-input v-model="form.gthumb" placeholder="请输入" disabled="true" />
                      </el-form-item> -->
    <el-form-item label="单价" class="ac">
        <el-input v-model="form.gprice" placeholder="请输入" disabled="true" />
    </el-form-item>
    <el-form-item label="库存数量" class="ac">
        <el-input v-model="form.dnumber" placeholder="请输入" disabled="true" />
    </el-form-item>
    <el-form-item label="入库数量" class="ac">
        <el-input v-model="form.sinbound" placeholder="请输入" disabled="true" />
    </el-form-item>
    <el-form-item label="入库金额" class="ac">
        <el-input v-model="form.sinmoney" placeholder="请输入" disabled="true" />
    </el-form-item>
    <el-form-item label="最低库存" class="ac">
        <el-input v-model="form.dlower" placeholder="请输入" disabled="true" />
    </el-form-item>
    <el-form-item label="最高库存" class="ac">
        <el-input v-model="form.dupper" placeholder="请输入" disabled="true" />
    </el-form-item>
    <el-form-item label="审核人" class="ac">
        <el-input v-model="form.approver" placeholder="请输入" disabled="true" />
    </el-form-item>
</el-form>

</el-drawer>
</template>

<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import Form from "/src/views/5.In/1.vue";
import { inject } from 'vue'
import { useRoute } from 'vue-router'

export default {
    name: "basetable",

    setup() {

        const route = useRoute()
        console.log('route.params===='+route.params.s_gid)

        const value2 = ref(false)
        const form = ref({
            s_type: '',
            s_code: '',
            s_vendor: '',
            sdate: '',
            head: '',
            gcategory: '',
            s_gid: '',
            s_wid: '',
            gname: '',
            gmodel: '',
            gthumb: '',
            gprice: '',
            dnumber: '',
            sinbound: '',
            sinmoney: '',
            dlower: '',
            dupper: '',
            approver: '',
        });

        const query = reactive({
            s_type: '',
            s_code: '',
            s_vendor: '',
            sdate: '',
            head: '',
            gcategory: '',
            s_gid: '',
            s_wid: '',
            gname: '',
            gmodel: '',
            gthumb: '',
            gprice: '',
            dnumber: '',
            sinbound: '',
            sinmoney: '',
            dlower: '',
            dupper: '',
            approver: '',
            currentPage: 1,
            pageSize: 6,
        });


        const queryInfo = ref({
            s_wid: '',
            gmodel: '',
            gname: '',
            sdate1: '',
            sdate2: '',
            currentPage: 1,
            pageSize: 6,
        })

        let pb = ref({
            currentPage: 1,
            pageSize: 6,
            list: [],
            totalPage: 0,
            totalCount: 0,
        })
        const drawer = ref(false)
      
        const Form = ref(null)
       /*  const beforeChange = () => {
            axios({
                method: 'post',
                url: 'http://localhost:8080/api/storageServlet',
                data: route.params
            }).then(function (resp) {
                console.log(resp.data.data)
               
            });
            return new Promise((resolve) => {
 
                    
              
                  
                    ElMessage.success("入库成功");
                    
                    return resolve(true);
            });
        }; */
      
        const details = (row) => {
            console.log(row)
            drawer.value=true
            
            form.value = row
        }


        // 发起一个post请求
        axios({
            method: 'post',
            url: 'http://localhost:8080/api/storageRecordsServlet',
            data: queryInfo.value
        }).then(function (resp) {

            pb.value = resp.data.data
            query.value = resp.data.data.list

            console.log(pb.value)
            console.log(resp.data.data)
        });

        const search = () => {

            axios({
                method: 'post',
                url: 'http://localhost:8080/api/storageRecordsServlet',
                data: queryInfo.value
            }).then(function (resp) {
                pb.value = resp.data.data


            });
        }

        //跳转分页
        const handlePageChange = (val) => {
            console.log("queryInfo===" + queryInfo.value)
            console.log("val===" + val)
            axios({
                method: 'post',
                url: 'http://localhost:8080/api/storageRecordsServlet',
                data:
                {
                    s_wid: queryInfo.value.s_wid,
                    gmodel: queryInfo.value.gmodel,
                    gname: queryInfo.value.gname,
                    sdate1: queryInfo.value.sdate1,
                    sdate2: queryInfo.value.sdate2,
                    currentPage: val,
                    pageSize: queryInfo.value.pageSize,
                }
            }).then(function (resp) {
                pb.value = resp.data.data
                console.log(pb.value)
            });
        }

        //重置
        const flush = () => {
            window.location.reload()
        }


        const tableData = ref([]);





        // 删除操作
        const handleDelete = (index) => {
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {
                type: "warning",
            })
                .then(() => {
                    ElMessage.success("删除成功");
                    tableData.value.splice(index, 1);
                })
                .catch(() => { });
        };






        return {
            query,
            tableData,
            handleDelete,
            queryInfo,
            pb,
            search,
            handlePageChange,
            flush,
            drawer,
            value2,
            find,
            /* beforeChange, */
            Form,
            form,
            details,
            
            route
        };
    }

};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

.ml-2 {
    --el-switch-on-color: #13ce66;
    --el-switch-off-color: #ff4949
}

.ac {
    width: 400px;
}

/* .dra{
    width: 1000px;
} */
</style>